<template>
  <div class="group">
    <div
      class="fold"
      :style="{ left: isCollapse ? '0' : '300px', transition: 'left 0.5s' }"
      @click="toggleSidebar"
    >
      <img src="../../assets/images/fold-btn.png" />
    </div>

    <div
      class="group-left"
      :style="{
        width: isCollapse ? '0' : '300px',
        borderRight: isCollapse ? 'none' : '1px solid #e7e7e7',
        transition: 'width 0.5s',
      }"
    >
      <div ref="sidebar" v-if="!isCollapse">
        <div class="group-title">
          <img src="../../assets/images/data-statistics.png" />
          <span>数据统计</span>
        </div>
        <div class="group-area">
          <span>总建筑面积</span>
          <span>{{ buildArea || 0 }}㎡</span>
        </div>
        <div class="group-pie">
          <div class="title"><span></span>租赁协议智能提醒</div>
          <div class="middle-info-data">
            <dl @click="leaseRemindClick(2)">
              <dt>{{ leaseRemindObj && leaseRemindObj.leaseRemindNum }}</dt>
              <dd>提醒</dd>
            </dl>
            <dl @click="leaseRemindClick(1)">
              <dt>{{ leaseRemindObj && leaseRemindObj.leaseUrgencyNum }}</dt>
              <dd>紧急</dd>
            </dl>
            <dl @click="leaseRemindClick(0)">
              <dt>{{ leaseRemindObj && leaseRemindObj.leaseOverdueNum }}</dt>
              <dd>超期</dd>
            </dl>
          </div>
        </div>
        <div class="group-pie">
          <div class="title"><span></span>租金缴纳智能提醒</div>
          <div class="middle-info-data">
            <dl @click="leaseRentRemindClick(2)">
              <dt>{{ leaseRemindObj && leaseRemindObj.leaseRentRemindNum }}</dt>
              <dd>提醒</dd>
            </dl>
            <dl @click="leaseRentRemindClick(1)">
              <dt>
                {{ leaseRemindObj && leaseRemindObj.leaseRentUrgencyNum }}
              </dt>
              <dd>紧急</dd>
            </dl>
            <dl @click="leaseRentRemindClick(0)">
              <dt>
                {{ leaseRemindObj && leaseRemindObj.leaseRentOverdueNum }}
              </dt>
              <dd>超期</dd>
            </dl>
          </div>
        </div>
        <div class="group-pie statistics">
          <div class="title"><span></span>统计资产类型</div>
          <div
            id="funnelchart"
            class="chart"
            style="width: 260px; height: 300px; margin-top: -10px"
          />
        </div>
      </div>
    </div>
    <div class="group-right">
      <div class="group-title">
        <img src="../../assets/images/data-query.png" />
        <span>数据查询</span>
      </div>

      <div class="group-right-search">
        <el-form ref="form" :model="form" label-width="120px" size="small">
          <el-row>
            <el-col :span="5">
              <el-form-item label="资产地块名称：">
                <el-input v-model="form.propertyName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="产权人：">
                <el-input v-model="form.propertyOwner"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="资产地块编号：">
                <el-input v-model="form.enterpriseName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="所在社区：">
                <el-select
                  v-model="form.propertyCommunity"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in communityList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="search-btn">
              <span @click="searchClick">查询</span>
              <span @click="resetSearchFn">重置</span>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="group-right-opt">
        <div class="add-property" @click="addPropertyClick" v-show="permissions.includes('add:assets:disabled')">
          <i class="el-icon-plus"></i>添加资产地块
        </div>
        <el-switch
          v-model="status"
          active-color="#0052D9"
          inactive-color="#DCDFE6"
          inactive-text="仅展示灭失档案"
          @change="switchChange"
        >
        </el-switch>
      </div>
      <div class="group-right-content">
        <!-- <div class="group-right-content-lf">
          <span class="title">管理单位</span>
          <div
            v-for="(item, index) in unitList"
            :key="index"
            @click="lfItemClick(index, item)"
            :class="[
              activeIndex === index
                ? 'active content-lf-all'
                : 'content-lf-all',
            ]"
          >
            <i class="el-icon-caret-right" v-show="activeIndex === index"></i>
            <span
              :style="{ 'padding-left': activeIndex === index ? '0' : '20px' }"
              >{{ item.manageDeptName }}</span
            >
            <span style="font-size: 14px">{{ item.manageDeptNum }}</span>
          </div>
        </div> -->
        <div class="group-right-content-rt">
          <div class="content-table">
            <el-table
              ref="multipleTable"
              v-loading="loading"
              :data="tableData"
              height="calc(100vh - 410px)"
              tooltip-effect="dark"
              class="table-info"
              style="width: 97%; margin: 0 auto"
              :default-sort="{ prop: 'propertyCode', order: 'descending' }"
              @sort-change="sortChange"
            >
              <el-table-column label="序号" width="100" align="center">
                <template slot-scope="scope">{{
                  (form.pageNum - 1) * form.pageSize + scope.$index + 1
                }}</template>
              </el-table-column>
              <el-table-column
                prop="propertyCode"
                label="资产地块编号"
                sortable
                width="130"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="propertyName"
                label="资产地块名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="propertyOwner"
                label="产权人"
                width="180"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="propertyCommunityName"
                label="所在社区"
                show-overflow-tooltip
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="manageDeptName"
                label="管理单位"
                show-overflow-tooltip
                align="center"
              ></el-table-column>

              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="checkHandleClick(scope.row)"
                    type="text"
                    size="small"
                    class="check"
                    v-show="permissions.includes('view:assets:disabled')"
                    >查看</el-button
                  >
                  <el-divider direction="vertical" v-if="permissions.includes('mieshi:assets:disabled')"></el-divider>
                  <el-popconfirm
                    title="是否灭失当前资产信息？"
                    @confirm="editorFn(scope.row)"
                    @onConfirm="editorFn(scope.row)"
                    v-if="permissions.includes('mieshi:assets:disabled')&&scope.row.archivingStatus === 0"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      size="small"
                      class="delete"
                      >灭失</el-button
                    >
                  </el-popconfirm>
                  <el-divider
                    direction="vertical"
                    v-if="permissions.includes('delete:assets:disabled')&&scope.row.archivingStatus === 0"
                  ></el-divider>
                  <el-popconfirm
                    title="是否删除当前资产信息？"
                    @confirm="deleteFn(scope.row)"
                    @onConfirm="deleteFn(scope.row)"
                    v-show="permissions.includes('delete:assets:disabled')"
                  >
                    <el-button
                      slot="reference"
                      type="text"
                      size="small"
                      class="delete"
                      >删除</el-button
                    >
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="getPropertyIndexPage"
            />
          </div>
        </div>
      </div>
    </div>
    <add-property-drawer
      :drawer.sync="drawer"
      :propertyCategoryId="propertyCategoryId"
      :pcategoryName="pcategoryName"
      @childEvent="getPropertyIndexPage"
      @childZcEvent="getPropertydeptGroup"
    ></add-property-drawer>

    <el-dialog
      title="租赁协议智能提醒"
      :visible.sync="leaseRemindDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-table :data="leaseRemindTableData" style="width: 100%" height="350px">
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="ownershipName"
          label="权属"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="propertyCode"
          label="资产地块编号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="propertyName" label="资产地块" align="center">
        </el-table-column>
        <el-table-column
          prop="propertyCommunityName"
          label="所在社区"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="remindNum" :label="remindLabel" align="center">
          <template slot-scope="scope">
            <span
              v-if="remindStatus === 2"
              style="
                color: #0052d9;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 1"
              style="
                color: #f1902b;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 0"
              style="
                color: #e34d59;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leaseRemindDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="租金缴纳智能提醒"
      :visible.sync="leaserentRemindDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-table
        :data="leaserentRemindTableData"
        style="width: 100%"
        height="350px"
      >
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          prop="ownershipName"
          label="权属"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="propertyCode"
          label="资产地块编号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="propertyName" label="资产地块" align="center">
        </el-table-column>
        <el-table-column
          prop="propertyCommunityName"
          label="所在社区"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="remindNum" :label="remindLabel" align="center">
          <template slot-scope="scope">
            <span
              v-if="remindStatus === 2"
              style="
                color: #0052d9;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 1"
              style="
                color: #f1902b;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
            <span
              v-if="remindStatus === 0"
              style="
                color: #e34d59;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="shopRouter(scope.row)"
            >
              {{ scope.row.remindNum }}</span
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="leaserentRemindDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addPropertyDrawer from "./add-property-drawer.vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
import {
  propertydeptGroup,
  propertyTypeGroup,
  propertyBuildingArea,
  propertyIndexPage,
  archivingProperty,
  delProperty,
  areaList,
  leaseRemind,
  leaseRemindList,
  leaserentRemindList,
} from "@/api/shops";

export default {
  components: {
    addPropertyDrawer,
  },
  props: {
    ownObj: {
      type: Object,
      require: true,
    },
    curIdx: {},
  },
  data() {
    return {
      isCollapse: false,
      form: {
        manageDeptId: undefined,
        propertyCommunity: undefined,
        propertyName: undefined,
        propertyOwner: undefined,
        archivingStatus: 0,
        pageNum: 1,
        pageSize: 10,
        propertyCodeSort: 1,
      },
      total: 0,
      ownershipId: undefined,
      pcategoryName: undefined,
      propertyCategoryId: undefined,
      buildArea: 0,
      status: false,
      communityList: [],
      curStatusList: [
        {
          value: "1",
          label: "正常",
        },
        {
          value: "2",
          label: "停产",
        },
        {
          value: "3",
          label: "关闭",
        },
      ],
      unitList: [], // 管理单位
      activeIndex: 0,
      value1: false,
      tableData: [],
      loading: false,
      chartPie: null,
      chartLine: null,
      chartFunnel: null,
      drawer: false,
      leaseRemindObj: null,
      leaseRemindDialogVisible: false,
      leaseRemindTableData: [], //租赁协议智能提醒
      remindLabel: "数量",
      leaserentRemindDialogVisible: false,
      leaserentRemindTableData: [], //租金缴纳智能提醒
      remindStatus: 2,
    };
  },

  watch: {
    ownObj: {
      handler(val) {
        if (val) {
          this.propertyCategoryId = val.propertyCategoryId;
          this.pcategoryName = val.pcategoryName;
        }
        this.form.pageNum = JSON.parse(sessionStorage.getItem("currentPage"));

        this.getPropertyIndexPage();
        this.getPropertydeptGroup();
        this.getLeaseRemind();
        this.getPropertyBuildingArea();

      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    permissions() {
      return this.$store.getters.permissions
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getPropertyTypeGroup();
      this.getPropertyBuildingArea();
      this.getAreaList();
    });
  },
  methods: {
    shopRouter(row) {
      this.$router.push({
        path: "/shops/index",
        component: () => import("@/views/shops/index"),
      });
      let info = {
        manageDeptName: "",
        propertyName: "",
        propertyId: row.propertyId,
      };
      localStorage.setItem("propertyinfo", JSON.stringify(info));
    },
    //租赁协议智能提醒
    leaseRemindClick(remindStatus) {
      this.remindStatus = remindStatus;
      let params = {
        propertyCategoryId: this.propertyCategoryId,
        remindStatus,
      };
      leaseRemindList(params).then((res) => {
        if (res.code == 200) {
          // this.leaseRemindDialogVisible = true;
          this.leaseRemindTableData = res.data;
          let type = "";
          if (remindStatus === 0) {
            type = "超期";
          } else if (remindStatus === 1) {
            type = "紧急";
          } else if (remindStatus === 2) {
            type = "提醒";
          }
          this.remindLabel = `${type}数量`;
        }
      });
    },

    //租金缴纳智能提醒
    leaseRentRemindClick(remindStatus) {
      this.remindStatus = remindStatus;
      let params = {
        propertyCategoryId: this.propertyCategoryId,
        remindStatus,
      };
      leaserentRemindList(params).then((res) => {
        if (res.code == 200) {
          // this.leaserentRemindDialogVisible = true;
          this.leaserentRemindTableData = res.data;
          let type = "";
          if (remindStatus === 0) {
            type = "超期";
          } else if (remindStatus === 1) {
            type = "紧急";
          } else if (remindStatus === 2) {
            type = "提醒";
          }
          this.remindLabel = `${type}数量`;
        }
      });
    },

    //【NEW】【首页】统计 资产地块租赁相关提醒
    getLeaseRemind() {
      let params = {
        propertyCategoryId: this.propertyCategoryId,
      };
      leaseRemind(params).then((res) => {
        if (res.code == 200) {
          this.leaseRemindObj = res.data;
        }
      });
    },
    // 管理单位列表
    getPropertydeptGroup() {
      propertydeptGroup({
        ownershipId: this.ownershipId,
        archivingStatus: this.form.archivingStatus,
      }).then((res) => {
        let unitItem = {
          manageDeptName: "全部",
          manageDeptId: undefined,
        };
        this.unitList = res.data;
        this.unitList.unshift(unitItem);
      });
    },
    toggleSidebar() {
      this.isCollapse = !this.isCollapse;
      this.$nextTick(() => {
        this.getPropertyTypeGroup();
        this.getPropertyBuildingArea();
      });
    },
    searchClick() {
      this.form.pageNum = 1;
      this.getPropertyIndexPage();
    },
    // 所在社区
    getAreaList() {
      let params = {
        areaName: "",
        parentId: "",
      };
      areaList(params).then((res) => {
        this.communityList = res.data;
      });
    },
    resetSearchFn() {
      this.form = {
        manageDeptId: undefined,
        propertyCommunity: undefined,
        propertyName: undefined,
        propertyOwner: undefined,
        archivingStatus: 0,
        pageNum: 1,
        pageSize: 10,
      };
      this.getPropertyIndexPage();
    },
    lfItemClick(index, item) {
      this.activeIndex = index;
      this.form.manageDeptId = item.manageDeptId || undefined;
      this.getPropertyIndexPage();
    },
    // 灭失switch
    switchChange() {
      this.status
        ? (this.form.archivingStatus = 1)
        : (this.form.archivingStatus = 0);

      this.getPropertyIndexPage();
      this.getPropertydeptGroup();
    },
    // 查看资产详情
    checkHandleClick(row) {
      console.log("this.form.pageNum", this.form.pageNum);
      this.$router.push({
        path: "/shops/index",
      });
      let info = {
        manageDeptName: row.manageDeptName,
        propertyName: row.propertyName,
        propertyId: row.propertyId,
      };
      localStorage.setItem("propertyinfo", JSON.stringify(info));
      localStorage.setItem("curIndex", this.curIdx);
      sessionStorage.setItem("currentPage", this.form.pageNum);
    },
    // 灭失
    editorFn(row) {
      let params = {
        archivingStatus: 1,
        propertyId: row.propertyId,
      };
      archivingProperty(params)
        .then((res) => {
          if (res.code == 200) {
            this.getPropertyIndexPage();
            this.$message.success("灭失成功");
          }
        })
        .catch(() => {
          this.$message.error("灭失失败");
        });
    },
    // 删除
    deleteFn(row) {
      delProperty(row.propertyId)
        .then((res) => {
          if (res.code == 200) {
            this.getPropertyIndexPage();
            this.$message.success("删除成功");
          }
        })
        .catch(() => {
          this.$message.error("删除失败");
        });
    },

    // 统计资产类型
    getPropertyTypeGroup() {
      propertyTypeGroup({ propertyCategoryId: this.propertyCategoryId }).then(
        (res) => {
          this.chartFunnel = echarts.init(
            document.getElementById("funnelchart")
          );
          let datas = [];
          if (res.data && res.data.length > 0) {
            datas = res.data.map((v) => {
              return {
                name: v.propertyTypeName,
                value: v.propertyTypeNum,
              };
            });
          }
          let option = {
            // backgroundColor: "#000",
            tooltip: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 30,
              },
            },
            series: [
              {
                type: "wordCloud",
                // 网格大小，各项之间间距
                gridSize: 14,
                // 形状 circle 圆，cardioid  心， diamond 菱形，
                // triangle-forward 、triangle 三角，star五角星
                shape: "circle",
                // 字体大小范围
                sizeRange: [10, 40],
                // // 文字旋转角度范围
                rotationRange: [0, 0],
                // 旋转步值
                // rotationStep: 45,
                // 自定义图形
                // maskImage: maskImage,
                left: "center",
                top: "center",
                right: null,
                bottom: null,
                // 画布宽
                width: "90%",
                // 画布高
                height: "90%",
                // 是否渲染超出画布的文字
                drawOutOfBound: false,
                textStyle: {
                  color: function () {
                    return (
                      "rgb(" +
                      [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                      ].join(",") +
                      ")"
                    );
                  },
                  // emphasis: {
                  //   shadowBlur: 10,
                  //   shadowColor: "#2ac",
                  // },
                },
                data: datas,
              },
            ],
          };
          option && this.chartFunnel.setOption(option);

          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            this.chartFunnel.resize();
          });
        }
      );
    },

    // 经营性总建筑面积
    getPropertyBuildingArea() {
      propertyBuildingArea({
        propertyCategoryId: 1,
      }).then((res) => {
        this.buildArea = res.data;
      });
    },
    // 排序事件
    sortChange(val) {
      if (val.order == "ascending") {
        this.form.propertyCodeSort = 0;
      } else if (val.order == "descending") {
        this.form.propertyCodeSort = 1;
      }
      this.getPropertyIndexPage();
    },
    // 【首页】资产分页
    getPropertyIndexPage() {
      this.loading = true;
      let params = {
        propertyCategoryId: this.propertyCategoryId,
        ...this.form,
      };
      propertyIndexPage(params)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 添加资产
    addPropertyClick() {
      this.drawer = true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.group {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  .fold {
    width: 24px;
    height: 40px;
    position: absolute;
    left: 300px;
    top: 40%;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .group-left {
    width: 300px;

    .group-area {
      width: 100%;
      padding-top: 10px;
      span {
        &:nth-child(1) {
          font-weight: 600;
          font-size: 12px;
          color: #505a69;
          padding-left: 24px;
          padding-right: 17px;
        }
        &:nth-child(2) {
          font-weight: 600;
          font-size: 20px;
          color: #505a69;
        }
      }
    }
    .group-pie {
      width: 90%;
      margin: 4px auto 20px;
      background-color: #fafafa;
      .title {
        font-size: 16px;
        padding: 15px;
        display: block;
        line-height: 16px;
        span {
          border-left: 4px solid #0052d9;
          padding-right: 5px;
        }
      }

      .middle-info-data {
        display: flex;
        justify-content: space-around;
        dl {
          width: 30%;
          cursor: pointer;
          dd {
            font-size: 14px;
            color: #1b213b;
            margin-left: 30%;
          }
          dt {
            text-align: center;
            font-size: 36px;
            line-height: 42px;
            font-weight: 600;
            &:nth-child(1) {
              color: #00d96d;
            }
          }
          &:nth-child(2) {
            dt {
              color: #f1902b;
            }
          }
          &:nth-child(3) {
            dt {
              color: #f56c6c;
            }
          }
        }
      }
    }
    .statistics {
      height: calc(100vh - 560px);
    }
  }
  .group-right {
    flex: 1;
    .group-right-search {
      width: 100%;
      margin-top: 30px;
      .search-btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 25px;
        cursor: pointer;

        span {
          &:nth-child(1) {
            @include searchBtn;
            height: 32px;
            line-height: 32px;
            width: 70px;
          }

          &:nth-child(2) {
            @include resetBtn;
            height: 32px;
            line-height: 32px;
            width: 70px;
          }
        }
      }
    }
    .group-right-opt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 25px 14px;
      .add-property {
        @include searchBtn;
        font-size: 14px;
        width: auto;
        padding: 0 5px;
      }
    }
    .group-right-content {
      display: flex;
      .group-right-content-lf {
        width: 200px;
        height: calc(100vh - 355px);
        border-radius: 6px;
        border: 1px solid #dcdcdc;
        margin-left: 25px;
        background: url("../../assets/images/sider-bg.png") no-repeat;
        background-size: cover;
        .title {
          font-size: 16px;
          margin: 16px 0 20px 16px;
          border-left: 4px solid #0052d9;
          padding-left: 5px;
          display: block;
          line-height: 16px;
        }
        .content-lf-all {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          padding: 9px;
          i {
            width: 20px;
            color: #f1902b;
          }
          span {
            &:nth-child(2) {
              padding-right: 10px;
              text-align: left;
              width: 40px;
              font-size: 15px;
              flex: 1;
              padding-left: 20px;
            }
          }
          &.active {
            background-color: #d3e4ff;
            span {
              color: #0052d9;
            }
          }
        }
      }
      .group-right-content-rt {
        flex: 1;
        .content-table {
          .line {
            color: #cacaca;
          }
          .check,
          .add {
            color: #0052d9;
          }
          .delete {
            color: #e34d59;
          }
        }
      }
    }
  }
  .group-title {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 28px;
    padding-left: 20px;
    img {
      width: 30px;
      height: 30px;
    }
    span {
      flex: 1;
      font-weight: bold;
      font-size: 16px;
      color: #1b213b;
      padding-left: 10px;
    }
  }
}
</style>

<style lang="scss">
.group {
  .el-divider--vertical {
    margin: 0 4px;
  }
}
</style>